import React, { useEffect, useState } from "react";
import http from "../../http";
import { useParams } from "react-router-dom";
import { StarO, ChatO, Gem, GoodJobO } from "@react-vant/icons";
import { Card, Toast, Image, Space, Badge } from "react-vant";
import styles from "../FerId/fer.module.scss";
import { useNavigate } from "react-router-dom";

export default function Ferid() {
  const navigate = useNavigate();
  interface pathentCircleDetailParamsStart {
    //加？是因为有可能为空对象
    adoptComment?: string;
    adoptCommentId?: number;
    adoptFlag?: number;
    adoptHeadPic?: string;
    adoptNickName?: string;
    amount?: number;
    authorUserId?: number;
    collectionFlag?: number;
    collectionNum?: number;
    commentNum?: number;
    department?: string;
    departmentId?: number;
    detail?: string;
    disease?: number;
    picture?: string;
    sickCircleId?: number;
    title?: string;
    treatmentEndTime?: number;
    treatmentHospital?: string;
    treatmentProcess?: string;
    treatmentStartTime?: number;
  }
  const [isClicked, setIsClicked] = useState(false);

  const handleClick = () => {
    setIsClicked(!isClicked);
  };

  //------
  const [serdata, setData] = useState<pathentCircleDetailParamsStart>({});
  const params = useParams();
  //   传递过来的id
  const { id } = params;
  // console.log(id);

  useEffect(() => {
    http
      .get("/health/user/sickCircle/v1/findSickCircleInfo", {
        params: { sickCircleId: id },
      })
      .then((res: any) => {
        setData(res.result);
        console.log(res.result, "kofkeiofj");
      });
  }, []);

  // 评论区里面的数据
  interface CommentListParamsState {
    commentId: number;
    commentTime: number;
    commentUserId: number;
    content: string;
    headPic: string;
    nickName: string;
    opinion: number;
    opposeNum: number;
    supportNum: number;
    whetherDoctor: number;
  }
  const [setfeet, setFeet] = useState<CommentListParamsState[]>();
  const setsFeets = async () => {
    const res: any = await http.get(
      "/health/user/sickCircle/v1/findSickCircleCommentList",
      {
        params: { sickCircleId: id, page: 1, count: 20 },
      }
    );
    setFeet(res.result);
  };
  useEffect(() => {
    setsFeets();
  }, []);
  // 时间戳
  const commentTime = 1705233580000; // 获取当前时间的时间戳
  const dateObj = new Date(commentTime); // 将时间戳转换为Date对象
  const date = dateObj.toLocaleDateString(); // 获取日期部分

  return (
    <div>
      <>
        {/* 头像 */}
        <div className={styles.set_home}>
          <p className={styles.set_p}>头像</p>
          <h3>急寻:面神经炎的治疗方法</h3>
          <Space className={styles.demo_icon} gap={20}>
            <Badge dot>
              <Gem className={styles.demo_icons} />
            </Badge>
          </Space>
        </div>
        <Card>
          <Card.Header style={{ color: "#368AEA" }}>
            {serdata.adoptNickName}
          </Card.Header>
          <Card.Body style={{ color: "#368AEA" }}>[病症]</Card.Body>
          <Card.Body>{serdata.detail}</Card.Body>
          <span>
            <Card.Body style={{ color: "#368AEA" }}>[科室]</Card.Body>
            <Card.Body>{serdata.department}</Card.Body>
          </span>
          <Card.Body style={{ color: "#368AEA" }}>[病症详情]</Card.Body>
          <Card.Body>{serdata.disease}</Card.Body>
          <span>
            <Card.Body style={{ color: "#368AEA" }}>[治疗经理]</Card.Body>
            <Card.Body>
              <span className="set_body">{serdata.treatmentEndTime}</span>
            </Card.Body>
            <Card.Body>{serdata.treatmentProcess}</Card.Body>
          </span>
          <Card.Body style={{ color: "#368AEA" }}>[相关图片]</Card.Body>
          <Card.Cover onClick={() => Toast.info("点击了图片区域")}>
            <Image className={styles.set_imgs} src={serdata.picture} />
          </Card.Cover>
        </Card>
        <div>
          <h1>
            <Space className={styles.demo_icon} gap={20}>
              <span>
                <StarO />
                {serdata.adoptFlag}
              </span>

              <span>
                <ChatO onClick={handleClick} />
                {serdata.authorUserId}
              </span>
            </Space>
          </h1>
        </div>
        {/* //蒙层 */}
      </>
      {isClicked && (
        <div className={styles.set_mc}>
          {/* 上面空盒子 */}
          <div className={styles.set_setbox}></div>
          <div style={{ color: "pink" }} className={styles.set_weo}>
            {setfeet?.map((item, ind) => {
              return (
                <div key={ind} className={styles.gr_div}>
                  <span
                    className={styles.set_spanh}
                    onClick={() => {
                      navigate(`/Formation/${item.commentId}`);
                    }}
                  >
                    头像
                  </span>
                  <div className={styles.sgr_ppp}>
                    <h3>{item.nickName}</h3>
                    <span>{item.content}</span>
                    <div className={styles.brt_ute}>
                      <h3 className={styles.sss_ppp}>{date}</h3>
                      <h3>
                        <Space className="demo-icon" gap={20}>
                          <GoodJobO />
                        </Space>
                        {item.supportNum}
                      </h3>
                      <h3>
                        <Space className="demo-icon" gap={20}>
                          <GoodJobO />
                        </Space>
                        {item.whetherDoctor}
                      </h3>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          <button className={styles.set_sbutton} onClick={handleClick}>
            X
          </button>

          <input
            className={styles.sets_inputs}
            type="text"
            placeholder="在此留下高见吧!"
          />
          <div className={styles.set_setref}></div>
        </div>
      )}
    </div>
  );
}
